<mat-drawer-container class="example-container">
  <mat-drawer *ngIf="isUserLoggedIn()" mode="side" [opened]="true">
    <mat-card (click)="visitMyProfile()">ERP-MES</mat-card>
    <mat-accordion>

      <mat-expansion-panel>
        <mat-expansion-panel-header [collapsedHeight]="collapsedHeight" [expandedHeight]="expandedHeight">
          <mat-panel-title>Communication</mat-panel-title>
        </mat-expansion-panel-header>
        <mat-divider></mat-divider>
        <mat-nav-list dense>

          <a mat-list-item routerLink="/emails/inbox" routerLinkActive="active">
            <mat-icon matListIcon>drafts</mat-icon>
            <h4 matLine>Inbox</h4>
          </a>
          <mat-divider></mat-divider>

          <a mat-list-item routerLink="/emails/outbox" routerLinkActive="active">
            <mat-icon matListIcon>email</mat-icon>
            <h4 matLine>Outbox</h4>
          </a>
          <mat-divider></mat-divider>

          <a mat-list-item routerLink="/notifications" routerLinkActive="active">
            <mat-icon matListIcon>notifications</mat-icon>
            <h4 matLine>Notifications</h4>
          </a>

          <mat-divider></mat-divider>
          <a mat-list-item routerLink="/suggestions" routerLinkActive="active">
            <mat-icon matListIcon>plus_one</mat-icon>
            <h4 matLine>Suggestions</h4>
          </a>
          <mat-divider></mat-divider>

        </mat-nav-list>
      </mat-expansion-panel>

      <mat-expansion-panel>
        <mat-expansion-panel-header [collapsedHeight]="collapsedHeight" [expandedHeight]="expandedHeight">
          <mat-panel-title>Production</mat-panel-title>
        </mat-expansion-panel-header>
        <mat-divider></mat-divider>

        <mat-nav-list dense>
          <a mat-list-item routerLink="/current-report" routerLinkActive="active">
            <mat-icon matListIcon>today</mat-icon>
            <h4 matLine>Current report</h4>
          </a>
          <mat-divider></mat-divider>

          <a mat-list-item routerLink="/reports" routerLinkActive="active">
            <mat-icon matListIcon>calendar_today</mat-icon>
            <h4 matLine>Reports</h4>
          </a>
          <mat-divider></mat-divider>

          <a mat-list-item routerLink="/planning" routerLinkActive="active">
            <mat-icon matListIcon>assignment</mat-icon>
            <h4 matLine>Planning</h4>
          </a>
          <mat-divider></mat-divider>

          <a mat-list-item routerLink="/special-plans" routerLinkActive="active">
            <mat-icon matListIcon>assignment_late</mat-icon>
            <h4 matLine>Special plans</h4>
          </a>
          <mat-divider></mat-divider>

          <a mat-list-item routerLink="/tasks" routerLinkActive="active">
            <mat-icon matListIcon>check</mat-icon>
            <h4 matLine>Tasks</h4>
          </a>
          <mat-divider></mat-divider>

        </mat-nav-list>
      </mat-expansion-panel>

      <mat-expansion-panel>
        <mat-expansion-panel-header [collapsedHeight]="collapsedHeight" [expandedHeight]="expandedHeight">
          <mat-panel-title>Shop</mat-panel-title>
        </mat-expansion-panel-header>
        <mat-divider></mat-divider>
        <mat-nav-list dense>

          <a mat-list-item routerLink="/complaints" routerLinkActive="active">
            <mat-icon matListIcon>sentiment_dissatisfied</mat-icon>
            <h4 matLine>Complaints</h4>
          </a>
          <mat-divider></mat-divider>

          <a mat-list-item routerLink="/deliveries" routerLinkActive="active">
            <mat-icon matListIcon>card_giftcard</mat-icon>
            <h4 matLine>Deliveries</h4>
          </a>

          <mat-divider></mat-divider>
          <a mat-list-item routerLink="/items" routerLinkActive="active">
            <mat-icon matListIcon>shopping_cart</mat-icon>
            <h4 matLine>Items</h4>
          </a>

          <mat-divider></mat-divider>
          <a mat-list-item routerLink="/orders" routerLinkActive="active">
            <mat-icon matListIcon>redo</mat-icon>
            <h4 matLine>Orders</h4>
          </a>

          <mat-divider></mat-divider>
          <a mat-list-item routerLink="/returns" routerLinkActive="active">
            <mat-icon matListIcon>undo</mat-icon>
            <h4 matLine>Returns</h4>
          </a>
          <mat-divider></mat-divider>

        </mat-nav-list>
      </mat-expansion-panel>

      <mat-expansion-panel>
        <mat-expansion-panel-header [collapsedHeight]="collapsedHeight" [expandedHeight]="expandedHeight">
          <mat-panel-title>Staff</mat-panel-title>
        </mat-expansion-panel-header>
        <mat-divider></mat-divider>
        <mat-nav-list dense>

          <a mat-list-item routerLink="/employees" routerLinkActive="active">
            <mat-icon matListIcon>person</mat-icon>
            <h4 matLine>Employees</h4>
          </a>
          <mat-divider></mat-divider>

          <a mat-list-item routerLink="/teams" routerLinkActive="active">
            <mat-icon matListIcon>people</mat-icon>
            <h4 matLine>Teams</h4>
          </a>
          <mat-divider></mat-divider>

        </mat-nav-list>
      </mat-expansion-panel>

      <mat-expansion-panel>
        <mat-expansion-panel-header [collapsedHeight]="collapsedHeight" [expandedHeight]="expandedHeight">
          <mat-panel-title>Settings</mat-panel-title>
        </mat-expansion-panel-header>
        <mat-divider></mat-divider>
        <mat-nav-list dense>

          <a mat-list-item routerLink="/login" routerLinkActive="active">
            <mat-icon matListIcon>cloud_queue</mat-icon>
            <h4 matLine>Sign in</h4>
          </a>

        </mat-nav-list>
      </mat-expansion-panel>

    </mat-accordion>
  </mat-drawer>
  <mat-drawer-content>

    <router-outlet>
      <div *ngIf="isUserLoggedIn()">
        <button mat-fab class="btn open-button" onclick="document.getElementById('popup').style.display ='block';">
          <mat-icon>forum</mat-icon>
        </button>

          <form class="popup" id="popup" (keydown.enter)="sendMessage(input.value)">
            <h3>Messages</h3>
            <div id="chat">
              <div class="message"></div>
            </div>
            <textarea id="input" type="text" maxlength="300" #input></textarea>

            <button mat-fab class="send-button" (click)="sendMessage(input.value)">
              <mat-icon>send</mat-icon>
            </button>

            <button mat-fab class="open-button" onclick="document.getElementById('popup').style.display = 'none';">
              <mat-icon>clear</mat-icon>
            </button>

          </form>
      </div>
    </router-outlet>

  </mat-drawer-content>
</mat-drawer-container>
